<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				padding-bottom: 100px;
			}
			
			.wrap {
				position: relative;
				margin: 0 auto;
				width: 1000px;
				height: 1060px;
				background-color: beige;
				overflow: hidden;
			}
			
			ul,
			li {
				margin: 0;
				padding: 0;
			}
			
			h1,
			p {
				margin: 0;
				padding: 0;
			}
			
			ul {
				position: absolute;
				top: 0;
				left: 0;
				height: 1060px;
			}
			
			li {
				list-style: none;
				width: 96%;
				height: 106px;
			}
			
			.scroll {
				position: absolute;
				top: 0;
				right: 0;
				width: 4%;
				height: 1060px;
				border-radius: 30px;
				background-color: red;
			}
			
			#move_scroll {
				position: absolute;
				top: 0;
				right: 1%;
				width: 97%;
				height: 100px;
				border-radius: 30px;
				background-color: black;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<ul>
				<li>
					<h1>央视网消息</h1>
					<p>7月2日，习近平总书记在中南海同团中央新一届领导班子成员集体谈话并发表重要讲话。当晚的《新闻联播》头条用将近9分钟的时长进行了播报。</p>
				</li>
				<li>
					<h1>央视网消息</h1>
					<p>7月2日，习近平总书记在中南海同团中央新一届领导班子成员集体谈话并发表重要讲话。当晚的《新闻联播》头条用将近9分钟的时长进行了播报。</p>
				</li>
				<li>
					<h1>央视网消息</h1>
					<p>7月2日，习近平总书记在中南海同团中央新一届领导班子成员集体谈话并发表重要讲话。当晚的《新闻联播》头条用将近9分钟的时长进行了播报。</p>
				</li>
				<li>
					<h1>央视网消息</h1>
					<p>7月2日，习近平总书记在中南海同团中央新一届领导班子成员集体谈话并发表重要讲话。当晚的《新闻联播》头条用将近9分钟的时长进行了播报。</p>
				</li>
				<li>
					<h1>央视网消息</h1>
					<p>7月2日，习近平总书记在中南海同团中央新一届领导班子成员集体谈话并发表重要讲话。当晚的《新闻联播》头条用将近9分钟的时长进行了播报。</p>
				</li>
				<li>
					<h1>央视网消息</h1>
					<p>7月2日，习近平总书记在中南海同团中央新一届领导班子成员集体谈话并发表重要讲话。当晚的《新闻联播》头条用将近9分钟的时长进行了播报。</p>
				</li>
				<li>
					<h1>2800点之下的众生相：有人断然清仓 有人淡定满仓</h1>
					<p>股市的波动是人性的波动，有人越低迷越便宜越买，但普通投资者往往在黑暗的尽头，难以承受超越心理极限下跌之痛苦，放弃了筹码。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
				<li>
					<h1>落马书记曾1年67次批示反腐 对妹妹受贿却纵容了</h1>
					<p>长安街知事注意到，日前，一个叫苏留芳的女老板因向孙立坤的妹妹行贿近百万，终审获刑2年半、罚金20万。</p>
				</li>
			</ul>
			<div class="scroll">
				<div id="move_scroll">

				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript">
	var oW = document.getElementsByClassName("wrap");
	var allLi = oW[0].getElementsByTagName("li");
	var oMove_scroll = document.getElementById("move_scroll");
	//1.先判断 有多少 li,每个li的平均高度;
	//每条li对应高度
	var liHeight = parseInt(getStyle(allLi[0]).height);
	console.log(parseInt(getStyle(oW[0]).height));
	//未显示内容出来的内容条数
	var liLen = allLi.length - parseInt(getStyle(oW[0]).height) / liHeight;

	//2.获取.scroll的高度同时设置移动滚动条高度设置
	var scroll_height = parseInt(getStyle(oW[0].children[1]).height) / (liLen + 1);
	oMove_scroll.style.height = scroll_height + "px";

	//下标
	var index = 0;

	function eFn(e, dir) {

		//3.根据li个数来分配梅格的高度以及移动滚动条的高度
		//说明:因为 dir返回的为+- 1以上所以我们可以设置一个初始值来记录index  根据返回的数值来进行+ -;
		//1)根据下标来往上滚动还是不滚动,并且设置move_scroll的top
		index += dir;
		index < 0 && (index = 0);
		index > liLen && (index = liLen);
		oW[0].children[1].children[0].style.top = index * scroll_height + "px";
		//2)设置ul的样式
		oW[0].children[0].style.top = -index * liHeight + "px";
		return false;
	}
	mouseWheel(oW[0], eFn);

	function mouseWheel(dom, eFn) {
		var type = "";
		//判断是否火狐浏览器
		dom.onmousewheel == null ? type = "mousewheel" : type = "DOMMouseScroll";
		//判断IE浏览器,好决定使用哪一种绑定方式
		dom.addEventListener ? dom.addEventListener(type, fn) : dom.attachEvent("on" + type, fn);

		//真正 事件处理函数  用来做  统一处理
		function fn(e) {
			e = e || window.event;
			//滚动方向和数值统一，正1往下，-1往上
			var direction = -e.wheelDelta / 120 || e.detail / 3;
			eFn.call(dom, e, direction) === false && dom.addEventListener ? e.preventDefault() : e.returnValue = false //阻止默认行为;
		}
	}

	function getStyle(ele) {
		return ele.currentStyle || getComputedStyle(ele);
	}
</script>